<template>
  <div class="container">
    <div class="hd">
      <h1 class="page_title">{{deptName}}</h1>
    </div>
    <div class="weui_cells_title" v-show="showEmpty">{{emptyMsg}}</div>
    <div class="weui_cells weui_cells_access" style="margin-top:0;">
      <a class="weui_cell" href="javascript:;" v-for="doctor in doctors" @click="goReg($index)">
        <div class="weui_cell_hd">
          <img :src="doctor.doctorPhotoUrl" alt="icon" style="width:90px;height:100px;margin-right:5px;display:block">
        </div>
        <div class="weui_cell_bd weui_cell_primary">
          <p>{{doctor.doctorName}}</p>
          <p><span class="orange_tag">{{doctor.regType}}</span></p>
          <p><span class="orange_tag">{{doctor.startTime.substr(11,5)}} - {{doctor.endTime.substr(11,5)}}</span></p>
        </div>
        <div class="weui_cell_bd">
         <!--  <p>
            <span class="blue_tag">等候 {{doctor.waitCount}} 人</span>
          </p> -->
          <p v-show="doctor.doctorId">
            <span class="blue_tag" v-show="doctor.leaveCount > 0">剩 {{doctor.leaveCount}}</span>
            <span class="blue_tag" v-show="doctor.leaveCount <= 0">暂无号源</span>
          </p>
          <p v-show="doctor.doctorId">
            <span class="blue_tag">{{doctor.regAmt}} 元</span>
          </p>
        </div>
        <div class="weui_cell_ft" v-show="doctor.leaveCount > 0"></div>
      </a>
    </div>
    <partial name="footer-copyright"></partial>
  </div>
</template>
<style scoped>
.hd {
  padding: .5em 0;
}

.page_title {
  text-align: center;
  font-size: 20px;
  color: #B86086;
  font-weight: 400;
  margin: 0 5%;
}

.blue_tag {
  background-color: #0ae;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.orange_tag {
  background-color: #ff8208;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
</style>
<script>
import _ from 'underscore'
import { setRegSlice } from '../../vuex/actions'

export default {
  name: 'RegDoctorListView',
  vuex: {
    actions: {
      setRegSlice
    }
  },
  data: function () {
    return {
      deptId: '',
      deptName: '',
      doctorId: '',
      doctors: [],
      showEmpty: false,
      emptyMsg: ''
    }
  },
  ready: function () {
    this.deptId = this.$route.query.deptId
    this.deptName = this.$route.query.deptName
    this.doctorId = this.$route.query.doctorId
    this.getRegDoctorList()
  },
  methods: {
    getRegDoctorList: function () {
      var self = this
      this.$ajax.get('GetRegDoctorList', 'Reg', { deptId: this.deptId, doctorId: this.doctorId }).then(function (data) {
        if (data.ResultCode === '0') {
          self.doctors = _.map(data.Doctors, function (val) {
            return {
              scheduleId: val.ScheduleId,
              doctorId: val.DoctorId,
              doctorName: val.DoctorName,
              doctorPhotoUrl: val.DoctorPhotoUrl,
              subjectId: val.SubjectId,
              subjectName: val.SubjectName,
              regType: val.RegType,
              regAmt: val.RegAmt,
              leaveCount: val.LeaveCount,
              waitCount: val.WaitCount,
              startTime: val.StartTime,
              endTime: val.EndTime
            }
          })

          if (self.doctors.length <= 0) {
            self.showEmpty = true
            self.emptyMsg = '无医生排班'
            self.doctors = []
          }
        } else {
          self.showEmpty = true
          self.emptyMsg = data.ResultMsg
          self.doctors = []
        }
      })
    },
    goReg: function (idx) {
      var doctor = this.doctors[idx]
      if (doctor.doctorId !== '' && doctor.leaveCount <= 0) {
        return
      }
      this.setRegSlice(this.deptId, this.deptName, doctor.doctorId, doctor.doctorName, doctor.doctorPhotoUrl, doctor.regType, doctor.regAmt, doctor.startTime, doctor.endTime, doctor.scheduleId, doctor.subjectId, doctor.subjectName)
      this.$router.go({ name: 'selectRegPoint' })
    }
  }
}
</script>
